<template>
  <div class="withdraw">
    <van-pull-refresh v-model="data.refreshing" @refresh="onRefresh">
        <van-list v-model:loading="data.loading" :finished="data.finished" :finished-text="data.list && !data.list.length?'':'没有更多了'" @load="onLoad">
          <div class="card-item" v-for="item in data.list" :key="item.id">
            <div class="card-item__header flex-align-center justify-between">
              <span class="title">提现</span>
              <span class="amount text-333"> ¥{{ filters.formater(item.amount) }}</span>
            </div>
            <div class="mt-30 card-item__cell">
              交易状态：<span :class="'status' + item.status">{{ filters.statusDesc(item.status) }}</span>
            </div>
            <div class="mt-30 card-item__cell">交易时间：{{ filters.timeFormat(item.createTime) }}</div>
            <div v-if="item.status == 2" style="word-break: break-all; " class="mt-30 card-item__cell">
            驳回理由：<span style="width:60%" class="text-333">{{ item.refuseInfo }}</span>
          </div>
          </div>
        </van-list>
      <div class="notdata" v-if="data.list && !data.list.length">
        <img src="../assets/notOrderList21.png" width="100%" />
        <div class="not-text">没有订单呢～</div>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import { WithdrawList } from '@/config/api'
import dayjs from 'dayjs'

const data = ref({
  loading: false,
  finished: false,
  refreshing: false,
  list: [],
  pageNo: 1,
  pageSize: 10
})

onBeforeMount(() => {
  // WithdrawList({}).then(resp=>{
  //     data.value = resp
  //     console.log(resp,'WithdrawList');
  // })
})

const filters = ref({
  statusDesc: function(val) {
    return ['', '已完成', '被驳回','审核中'][+val]
  },
  timeFormat: function(val) {
    return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
  },
  formater: function(data) {
    if (!data) return '0.00'
    // 将数据分割，保留两位小数
    data = data.toFixed(2)
    // 获取整数部分
    const intPart = Math.trunc(data)
    // 整数部分处理，增加,
    const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
    // 预定义小数部分
    let floatPart = '.00'
    // 将数据分割为小数部分和整数部分
    const newArr = data.toString().split('.')
    if (newArr.length === 2) {
      // 有小数部分
      floatPart = newArr[1].toString() // 取得小数部分
      return intPartFormat + '.' + floatPart
    }
    return intPartFormat + floatPart
  }
})

const onLoad = () => {
  const { pageNo, pageSize } = data.value
  data.value.loading = true
  WithdrawList({ pageNo, pageSize })
    .then((resp) => {
      if (data.value.refreshing) {
            data.value.list = resp.records
        } else {
            data.value.list = data.value.list.concat(resp.records)
        }
        if (resp.total > data.value.list.length) {
            data.value.pageNo++
        } else if (resp.total == data.value.list.length) {
            data.value.finished = true
        }
        data.value.loading = false
        data.value.refreshing = false
    })
        .catch(() => {
            data.value.loading = false
            data.value.refreshing = false
            data.value.finished = true
        })
    // 数据全部加载完成
    // if (list.value.length >= 40) {
    //   finished.value = true;
    // }
}

const onRefresh = () => {
    // 清空列表数据
    data.value.finished = false;
    data.value.refreshing = true
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    data.value.loading = true;
    data.value.pageNo = 1
    onLoad();
};
</script>

<style lang="less" scoped>
.text-E7451B {
  color: #e7451b !important;
}
.text-333 {
  color: #333333 !important;
}
.mt-30 {
  margin-top: 0.4rem;
}
.status2 {
  color: #2463e4;
}
.status1 {
  color: #ff6868;
}
.withdraw {
  min-height: 100vh;
  background: #f0f3f8;
  .card-item {
    margin: 0.4rem;
    padding: 0 0.4rem 0.4rem;
    min-height: 3.79rem;
    background: #ffffff;
    border-radius: 0.16rem;
    &__header {
      line-height: 1.52rem;
      border-bottom: 0.01rem solid #eeeff3;
      .amount,
      .title {
        font-size: 0.48rem;
        font-family: DIN-Medium, DIN;
        font-weight: 500;
        color: #101d37;
      }
    }
    &__cell {
      font-size: 0.4rem;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 0.56rem;
    }
  }
}
</style>
